<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定时嵌套的任务轮询</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background-color: yellowgreen;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
  <script>
    function interval(callback, delay = 100) {
      let id = setInterval(() => callback(id), delay);
    }
    const div = document.querySelector("div");
    interval((timeId) => {
      const left = parseInt(window.getComputedStyle(div).left);
      div.style.left = left + 10 + "px";
      if (left > 300) {
        clearInterval(timeId);
        interval((timeId) => {
          const width = parseInt(window.getComputedStyle(div).width);
          div.style.width = width - 1 + "px";
          if (width <= 0) clearInterval(timeId);
        }, 10);
      }
    }, 100);
    console.log("houdunren");
    for (let i = 0; i < 10000; i++) {
      console.log(i);
    }
  </script>
</html>
